<template>
  <zh-sheet :margin="[32, 0, 32, 24]" :padding="[24, 20]" :shadow="2" :round="6">
    <view class="flex-row-center-between">
      <view style="border-left: 10rpx solid #2f54eb">
        <zh-text :fontSize="36" class="text-weight-b pl-10" label="是否报民办学校"></zh-text>
      </view>
      <view style="width: 300rpx" class="flex-row-center-end">
        <zh-radio-group :disabled="form.zsbFlag === '1'" v-model="form.mbFlag" @change="mbChange">
          <zh-radio value="1" label="是"></zh-radio>
          <zh-radio :followTheme="false" color="orange" value="0" label="否"></zh-radio>
        </zh-radio-group>
      </view>
    </view>
    <zh-tabs v-if="form.mbFlag === '1'" align="center" itemModel="line" :item-width="140" :width="620" :height="0" default-name="1">
      <zh-tabs-pane name="1" title="第一志愿">
        <view style="width: 100%">
          <zh-form-select
            label="报名学校"
            suffix="tmicon-clock-fill"
            :lazy="true"
            mode="single"
            :fieldNames="{ label: 'schoolName', value: 'orgId' }"
            funcCode="eduschool0011"
            type="list"
            @confirm="onConfirmMb1"
            :queryParams="{ permissionFlag: false, schoolNature: '1', schoolCategory: form.schoolCategory }"
            searchField="schoolName"
            field="mb1SchoolId"
            v-model="form.mb1SchoolId"
          >
          </zh-form-select>
          <zh-form-select
            v-if="form.mb1Info.schoolId"
            field="mb1ConfigTypeName"
            :fieldNames="{ label: 'configTypeName', value: 'configTypeName', children: 'children' }"
            placeholder="请选择第一志愿报名类别"
            :showClear="false"
            v-model="form.mb1ConfigTypeName"
            :options="configTypeDictMb1"
            label="报名类别"
            @confirm="onConfirmMb1ConfigTypeName"
            :transprent="true"
          ></zh-form-select>

          <zh-sheet :round="3" v-if="form.mb1Info.schoolId && configTypeDictMb1 && configTypeDictMb1.length <= 0" :margin="[0, 0]" :padding="[20, 20]" color="deep-orange" text>
            <zh-text label="您的条件不符合学校的招生条件，如有疑问，请致电学校了解情况"></zh-text>
          </zh-sheet>
          <zh-form-item v-if="showBindMb1"  :transprent="true" label="是否绑定摇号" align="right" :width="300" >
              <zh-radio-group align="right" v-model="form.mb1Info.bindFlag">
                <zh-radio value="1" label="是"></zh-radio>
                <zh-radio :followTheme="false" color="orange" value="0" label="否"></zh-radio>
              </zh-radio-group>
            </zh-form-item>
            <zh-sheet v-if="form.mb1Info.bindFlag === '1'" :margin="[0, 20]" :round="3" :padding="[20, 20]" color="deep-orange" text>
              <zh-text class="text-weight-b" label="温馨提示:"></zh-text>
              <zh-text style="text-indent: 2em; padding-top: 10rpx" label="以下是已报名的孩子，请勾选需要绑定摇号的孩子"></zh-text>
            </zh-sheet>
          <zh-checkbox-group v-if="form.mb1Info.bindFlag === '1'" v-model="checkboxlistMb1">
            <zh-checkbox :key="'childMb1'+index" v-for="(item, index) in bindListMb1" :disabled="item.bindFlag==='1'" :value="item.idcard" :label="item.fullName"></zh-checkbox>
          </zh-checkbox-group>
        </view>
      </zh-tabs-pane>
      <zh-tabs-pane name="2" title="调剂志愿1">
        <view style="width: 100%">
          <zh-form-select
            label="报名学校"
            suffix="tmicon-clock-fill"
            :lazy="true"
            mode="single"
            :fieldNames="{ label: 'schoolName', value: 'orgId' }"
            funcCode="eduschool0011"
            type="list"
            @confirm="onConfirmMb2"
            :queryParams="{ permissionFlag: false, schoolNature: '1', schoolCategory: form.schoolCategory }"
            searchField="schoolName"
            field="mb2SchoolId"
            v-model="form.mb2SchoolId"
          >
          </zh-form-select>
          <zh-form-select
            v-if="form.mb2Info.schoolId"
            field="mb2ConfigTypeName"
            :fieldNames="{ label: 'configTypeName', value: 'configTypeName', children: 'children' }"
            placeholder="请选择调剂志愿1报名类别"
            :showClear="false"
            v-model="form.mb2ConfigTypeName"
            :options="configTypeDictMb2"
            @confirm="onConfirmMb2ConfigTypeName"
            label="报名类别"
            :transprent="true"
          ></zh-form-select>
          <zh-sheet :round="3" v-if="form.mb2Info.schoolId && configTypeDictMb2 && configTypeDictMb2.length <= 0" :margin="[0, 0]" :padding="[20, 20]" color="deep-orange" text>
            <zh-text label="您的条件不符合学校的招生条件，如有疑问，请致电学校了解情况"></zh-text>
          </zh-sheet>
          <zh-form-item v-if="showBindMb2"  :transprent="true" label="是否绑定摇号" align="right" :width="300" >
            <zh-radio-group align="right" v-model="form.mb2Info.bindFlag">
              <zh-radio value="1" label="是"></zh-radio>
              <zh-radio :followTheme="false" color="orange" value="0" label="否"></zh-radio>
            </zh-radio-group>
          </zh-form-item>
          <zh-sheet v-if="form.mb2Info.bindFlag === '1'" :margin="[0, 20]" :round="3" :padding="[20, 20]" color="deep-orange" text>
            <zh-text class="text-weight-b" label="温馨提示:"></zh-text>
            <zh-text style="text-indent: 2em; padding-top: 10rpx" label="以下是已报名的孩子，请勾选需要绑定摇号的孩子"></zh-text>
          </zh-sheet>
          <zh-checkbox-group v-if="form.mb2Info.bindFlag === '1'" v-model="checkboxlistMb2">
            <zh-checkbox :key="'childMb2'+index" v-for="(item, index) in bindListMb2" :disabled="item.bindFlag==='1'" :value="item.idcard" :label="item.fullName"></zh-checkbox>
          </zh-checkbox-group>
        </view>
      </zh-tabs-pane>
      <zh-tabs-pane name="3" title="调剂志愿2" v-if="form.followingFlag==='0'">
        <view style="width: 100%">
          <zh-form-select
            label="报名学校"
            suffix="tmicon-clock-fill"
            showClear
            :lazy="true"
            mode="single"
            :fieldNames="{ label: 'schoolName', value: 'orgId' }"
            funcCode="eduschool0011"
            type="list"
            @confirm="onConfirmMb3"
            :queryParams="{ permissionFlag: false, schoolNature: '1', schoolCategory: form.schoolCategory }"
            searchField="schoolName"
            field="mb3SchoolId"
            v-model="form.mb3SchoolId"
          >
          </zh-form-select>
          <zh-form-select
            v-if="form.mb3Info.schoolId"
            field="mb3ConfigTypeName"
            :fieldNames="{ label: 'configTypeName', value: 'configTypeName', children: 'children' }"
            placeholder="请选择调剂志愿2报名类别"
            :showClear="false"
            v-model="form.mb3ConfigTypeName"
            :options="configTypeDictMb3"
            @confirm="onConfirmMb3ConfigTypeName"
            label="报名类别"
            :transprent="true"
          ></zh-form-select>
          <zh-sheet :round="3" v-if="form.mb3Info.schoolId && configTypeDictMb3 && configTypeDictMb3.length <= 0" :margin="[0, 0]" :padding="[20, 20]" color="deep-orange" text>
            <zh-text label="您的条件不符合学校的招生条件，如有疑问，请致电学校了解情况"></zh-text>
          </zh-sheet>
          <zh-form-item v-if="showBindMb3"  :transprent="true" label="是否绑定摇号" align="right" :width="300" >
            <zh-radio-group align="right" v-model="form.mb3Info.bindFlag">
              <zh-radio value="1" label="是"></zh-radio>
              <zh-radio :followTheme="false" color="orange" value="0" label="否"></zh-radio>
            </zh-radio-group>
          </zh-form-item>
          <zh-sheet v-if="form.mb3Info.bindFlag === '1'" :margin="[0, 20]" :round="3" :padding="[20, 20]" color="deep-orange" text>
            <zh-text class="text-weight-b" label="温馨提示:"></zh-text>
            <zh-text style="text-indent: 2em; padding-top: 10rpx" label="以下是已报名的孩子，请勾选需要绑定摇号的孩子"></zh-text>
          </zh-sheet>
          <zh-checkbox-group v-if="form.mb3Info.bindFlag === '1'" v-model="checkboxlistMb3">
            <zh-checkbox :key="'childMb3'+index" v-for="(item, index) in bindListMb3" :disabled="item.bindFlag==='1'" :value="item.idcard" :label="item.fullName"></zh-checkbox>
          </zh-checkbox-group>
        </view>
      </zh-tabs-pane>
    </zh-tabs>
  </zh-sheet>
</template>

<script lang="ts" setup>
//民办报名信息
//民转公报名信息
import { reactive, watch, ref, onMounted } from 'vue';
// ------------------接收传入参数(组件)-------------------
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const emits = defineEmits(['update:modelValue']);
//---------------内部变量--------------------
const showBindMb1 = ref(false);
const bindListMb1 = ref<any>([]);
const bindListAllMb1 = ref<any>([]);
const checkboxlistMb1=ref<any>([]);
const showBindMb2 = ref(false);
const bindListMb2 = ref<any>([]);
const bindListAllMb2 = ref<any>([]);
const checkboxlistMb2=ref<any>([]);
const showBindMb3 = ref(false);
const bindListMb3 = ref<any>([]);
const bindListAllMb3 = ref<any>([]);
const checkboxlistMb3=ref<any>([]);
const form = ref<any>(props.modelValue);
if (form.value.mb1Info && form.value.mb1Info.schoolId) {
  form.value.mb1SchoolId = form.value.mb1Info.schoolId;
}
if (form.value.mb1Info && form.value.mb1Info.configTypeName) {
  form.value.mb1ConfigTypeName = form.value.mb1Info.configTypeName;
}
if(form.value.mb1Info&&form.value.mb1Info.bindIdcardList){
  checkboxlistMb1.value=form.value.mb1Info.bindIdcardList
}
if (form.value.mb2Info && form.value.mb2Info.schoolId) {
  form.value.mb2SchoolId = form.value.mb2Info.schoolId;
}
if (form.value.mb2Info && form.value.mb2Info.configTypeName) {
  form.value.mb2ConfigTypeName = form.value.mb2Info.configTypeName;
}
if(form.value.mb2Info&&form.value.mb2Info.bindIdcardList){
  checkboxlistMb2.value=form.value.mb2Info.bindIdcardList
}
if (form.value.mb3Info && form.value.mb3Info.schoolId) {
  form.value.mb2SchoolId = form.value.mb3Info.schoolId;
}
if (form.value.mb3Info && form.value.mb3Info.configTypeName) {
  form.value.mb3ConfigTypeName = form.value.mb3Info.configTypeName;
}
if(form.value.mb3Info&&form.value.mb3Info.bindIdcardList){
  checkboxlistMb3.value=form.value.mb3Info.bindIdcardList
}
form.value.mb1Info = { aspirationType: '1' };
form.value.mb2Info = { aspirationType: '2' };
form.value.mb3Info = { aspirationType: '3' };
const configTypeDictMb1 = ref<any>([]);
const configTypeDictMb2 = ref<any>([]);
const configTypeDictMb3 = ref<any>([]);
//----------------内部方法--------------------
const mbChange = (value: String) => {
  if (value !== '1') {
    form.value.mb1Info = { aspirationType: '1' };
    form.value.mb2Info = { aspirationType: '2' };
    form.value.mb3Info = { aspirationType: '3' };
    form.value.mb1SchoolId = '';
    form.value.mb1ConfigTypeName = '';
    showBindMb1.value = false;
    form.value.mb2SchoolId = '';
    form.value.mb2ConfigTypeName = '';
    showBindMb2.value = false;
    form.value.mb3SchoolId = '';
    form.value.mb3ConfigTypeName = '';
    showBindMb3.value = false;
  }
};
const onConfirmMb1 = (value: any, selectList: any) => {
  if (selectList && selectList.length > 0) {
    let configTypeDict = selectList[0].configList || [];
    if (configTypeDict.length > 0) {
      //剔除直升班报名列表，直升班专门一栏报名
      configTypeDict = configTypeDict.filter((item: any) => {
        return item.zsFlag !== '1';
      });
    }
    configTypeDictMb1.value = configTypeDict;
    checkBindMb1();
  }
};
const onConfirmMb2 = (value: any, selectList: any) => {
  if (selectList && selectList.length > 0) {
    let configTypeDict = selectList[0].configList || [];
    if (configTypeDict.length > 0) {
      //剔除直升班报名列表，直升班专门一栏报名
      configTypeDict = configTypeDict.filter((item: any) => {
        return item.zsFlag !== '1';
      });
    }
    configTypeDictMb2.value = configTypeDict;
    checkBindMb2();
  }
}
const onConfirmMb3 = (value: any, selectList: any) => {
  if (selectList && selectList.length > 0) {
    let configTypeDict = selectList[0].configList || [];
    if (configTypeDict.length > 0) {
      //剔除直升班报名列表，直升班专门一栏报名
      configTypeDict = configTypeDict.filter((item: any) => {
        return item.zsFlag !== '1';
      });
    }
    configTypeDictMb3.value = configTypeDict;
    checkBindMb3();
  }
}
//判断是否需要显示捆绑摇号
const onConfirmMb1ConfigTypeName=(val: any)=>{
  checkboxlistMb1.value=[]
  bindListMb1.value=[]
  form.value.mb1Info.bindFlag='0'
  showBindMb1.value = false;
  if(!val){
    return
  }
  //招生类别选择
  let list=bindListAllMb1.value
  if(val&&list&&list.length>0){
    list = list.filter((item: any) => {
      return item.configTypeName ===val;
    });
    bindListMb1.value = list;
    if(list&&list.length>0){
      showBindMb1.value = true;
      let idcardList=[] as any
      bindListMb1.value.forEach((item:any)=>{
        idcardList.push(item.idcard)
      })
      checkboxlistMb1.value=idcardList
    }else{
      showBindMb1.value = false;
    }
    
  }else{
    showBindMb1.value = false;
    checkboxlistMb1.value=[]
  }
}
const checkBindMb1 = () => {
  let params = { schoolId: form.value.mb1Info.schoolId,studentEnrollPreId:form.value.studentEnrollPreId };
  $api.common.send
    .post('eduStudentEnroll0049', params)
    .then((res: any) => {
      //保存成功后提示
      if (res.result&&res.result.length > 0) {
        
        bindListAllMb1.value = res.result;
      } else {
        showBindMb1.value = false;
        bindListAllMb1.value = [];
      }
      onConfirmMb1ConfigTypeName(form.value.mb1ConfigTypeName)
    })
    .catch(() => {
      showBindMb1.value = false;
      bindListAllMb1.value = [];
    });
};
//判断是否需要显示捆绑摇号
const onConfirmMb2ConfigTypeName=(val: any)=>{
  checkboxlistMb2.value=[]
  form.value.mb2Info.bindFlag='0'
  bindListMb2.value = [];
  showBindMb2.value = false;
  if(!val){
    return
  }
  //招生类别选择
  let list=bindListAllMb2.value
  if(val&&list&&list.length>0){
    list = list.filter((item: any) => {
      return item.configTypeName ===val;
    });
    bindListMb2.value = list;
    if(list&&list.length>0){
      showBindMb2.value = true;
      let idcardList=[] as any
      bindListMb2.value.forEach((item:any)=>{
        idcardList.push(item.idcard)
      })
      checkboxlistMb2.value=idcardList
    }else{
      showBindMb2.value = false;
    }
    
  }else{
    showBindMb2.value = false;
    checkboxlistMb2.value=[]
  }
}
const checkBindMb2 = () => {
  let params = { schoolId: form.value.mb2Info.schoolId,studentEnrollPreId:form.value.studentEnrollPreId };
  $api.common.send
    .post('eduStudentEnroll0049', params)
    .then((res: any) => {
      //保存成功后提示
      if (res.result&&res.result.length > 0) {
        bindListAllMb2.value = res.result;
      } else {
        showBindMb2.value = false;
        bindListAllMb2.value = [];
      }
      onConfirmMb2ConfigTypeName(form.value.mb2ConfigTypeName)
    })
    .catch(() => {
      showBindMb2.value = false;
      bindListAllMb2.value = [];
    });
};
//判断是否需要显示捆绑摇号
const onConfirmMb3ConfigTypeName=(val: any)=>{
  checkboxlistMb3.value=[]
  form.value.mb3Info.bindFlag='0'
  bindListMb3.value = [];
  showBindMb3.value = false;
  if(!val){
    
    return;
  }
  //招生类别选择
  let list=bindListAllMb3.value
  if(val&&list&&list.length>0){
    list = list.filter((item: any) => {
      return item.configTypeName ===val;
    });
    bindListMb3.value = list;
    if(list&&list.length>0){
      showBindMb3.value = true;
      let idcardList=[] as any
      bindListMb3.value.forEach((item:any)=>{
        idcardList.push(item.idcard)
      })
      checkboxlistMb3.value=idcardList
    }else{
      showBindMb3.value = false;
    }
    
  }else{
    showBindMb3.value = false;
    checkboxlistMb3.value=[]
  }
}
const checkBindMb3 = () => {
  let params = { schoolId: form.value.mb3Info.schoolId,studentEnrollPreId:form.value.studentEnrollPreId };
  $api.common.send
    .post('eduStudentEnroll0049', params)
    .then((res: any) => {
      //保存成功后提示
      if (res.result&&res.result.length > 0) {
        
        bindListAllMb3.value = res.result;
      } else {
        bindListAllMb3.value =[]
        showBindMb3.value = false;
      }
      onConfirmMb3ConfigTypeName(form.value.mb3ConfigTypeName)
    })
    .catch(() => {
      showBindMb2.value = false;
      bindListAllMb3.value =[]
    });
};
watch(
  () => props.modelValue.mb1Info,
  () => {
    form.value = props.modelValue;
    if (form.value.mb1Info && form.value.mb1Info.schoolId) {
      form.value.mb1SchoolId = form.value.mb1Info.schoolId;
    } else {
      form.value.mb1SchoolId = '';
    }
    if (form.value.mb1Info && form.value.mb1Info.configTypeName) {
      form.value.mb1ConfigTypeName = form.value.mb1Info.configTypeName;
    } else {
      form.value.mb1ConfigTypeName = '';
    }
    if(form.value.mb1Info&&form.value.mb1Info.bindIdcardList){
       checkboxlistMb1.value=form.value.mb1Info.bindIdcardList
    }else{
      checkboxlistMb1.value=[]
    }
  },
  {
    deep: true,
  }
);

watch(
  () => form.value.mb1SchoolId,
  () => {
    //父组件发送数据
    if (!form.value.mb1SchoolId) {
      form.value.mb1Info.schoolId = form.value.mb1SchoolId;
    } else {
      form.value.mb1Info.schoolId = form.value.mb1SchoolId;
    }
    emits('update:modelValue', form.value);
  },
  {
    deep: true,
  }
);
watch(
  () => props.modelValue.mbFlag,
  (value) => {
    //父组件发送数据
    mbChange(value)
  },
  {
    deep: true,
  }
);
watch(
  () => form.value.mb1ConfigTypeName,
  () => {
    //父组件发送数据
    form.value.mb1Info.configTypeName = form.value.mb1ConfigTypeName;
    emits('update:modelValue', form.value);
  },
  {
    deep: true,
  }
);

watch(
  () => props.modelValue.mb2Info,
  () => {
    form.value = props.modelValue;
    if (form.value.mb2Info && form.value.mb2Info.schoolId) {
      form.value.mb2SchoolId = form.value.mb2Info.schoolId;
    } else {
      form.value.mb2SchoolId = '';
    }
    if (form.value.mb2Info && form.value.mb2Info.configTypeName) {
      form.value.mb2ConfigTypeName = form.value.mb2Info.configTypeName;
    } else {
      form.value.mb2ConfigTypeName = '';
    }
    if(form.value.mb2Info&&form.value.mb2Info.bindIdcardList){
       checkboxlistMb2.value=form.value.mb2Info.bindIdcardList
    }else{
      checkboxlistMb2.value=[]
    }
  },
  {
    deep: true,
  }
);

watch(
  () => form.value.mb2SchoolId,
  () => {
    //父组件发送数据
    if (!form.value.mb2SchoolId) {
      form.value.mb2Info.schoolId = form.value.mb2SchoolId;
    } else {
      form.value.mb2Info.schoolId = form.value.mb2SchoolId;
    }
    emits('update:modelValue', form.value);
  },
  {
    deep: true,
  }
);
watch(
  () => form.value.mb2ConfigTypeName,
  () => {
    //父组件发送数据
    form.value.mb2Info.configTypeName = form.value.mb2ConfigTypeName;
    emits('update:modelValue', form.value);
  },
  {
    deep: true,
  }
);
watch(
  () => checkboxlistMb1.value,
  () => {
    //父组件发送数据
    form.value.mb1Info.bindIdcardList= checkboxlistMb1.value
    emits('update:modelValue', form.value);
  },
  {
    deep: true,
  }
);
watch(
  () => checkboxlistMb2.value,
  () => {
    //父组件发送数据
    form.value.mb2Info.bindIdcardList= checkboxlistMb2.value
    emits('update:modelValue', form.value);
  },
  {
    deep: true,
  }
);
watch(
  () => props.modelValue.mb3Info,
  () => {
    form.value = props.modelValue;
    if (form.value.mb3Info && form.value.mb3Info.schoolId) {
      form.value.mb3SchoolId = form.value.mb3Info.schoolId;
    } else {
      form.value.mb3SchoolId = '';
    }
    if (form.value.mb3Info && form.value.mb3Info.configTypeName) {
      form.value.mb3ConfigTypeName = form.value.mb3Info.configTypeName;
    } else {
      form.value.mb3ConfigTypeName = '';
    }
    if(form.value.mb3Info&&form.value.mb3Info.bindIdcardList){
       checkboxlistMb3.value=form.value.mb3Info.bindIdcardList
    }else{
      checkboxlistMb3.value=[]
    }
  },
  {
    deep: true,
  }
);

watch(
  () => form.value.mb3SchoolId,
  () => {
    //父组件发送数据
    if (!form.value.mb3SchoolId) {
      form.value.mb3Info.schoolId = form.value.mb3SchoolId;
    } else {
      form.value.mb3Info.schoolId = form.value.mb3SchoolId;
    }
    emits('update:modelValue', form.value);
  },
  {
    deep: true,
  }
);
watch(
  () => form.value.mb3ConfigTypeName,
  () => {
    //父组件发送数据
    form.value.mb3Info.configTypeName = form.value.mb3ConfigTypeName;
    emits('update:modelValue', form.value);
  },
  {
    deep: true,
  }
);
watch(
  () => checkboxlistMb3.value,
  () => {
    //父组件发送数据
    form.value.mb3Info.bindIdcardList= checkboxlistMb3.value
    emits('update:modelValue', form.value);
  },
  {
    deep: true,
  }
);
</script>

<style></style>
